<template>
  <div v-show="show">
    <el-input
      v-model.number="content"
      type="number"
      class="mo-input--number"
      :placeholder="placeholder"
      :disabled="disabled"
      :readonly="readonly"
      @input="change"
    >
      <template v-if="prepend" slot="prepend">{{ prepend }}</template>
      <template v-if="append" slot="append">{{ append }}</template>
    </el-input>
  </div>
</template>

<script>
export default {
  name: "numInput",
  props: {
    value: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "",
    },
    prepend: {
      type: String,
      default: "",
    },
    append: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: true,
    },
    readonly: {
      type: Boolean,
      default: true,
    },
    show: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    value(newVal) {
      this.content = newVal;
    },
  },
  data() {
    return {
      content: this.value,
    };
  },
  methods: {
    change(v) {
      this.$emit("input", v);
    },
  },
};
</script>
<style lang="scss">
/* 去掉右侧上下箭头  */
.mo-input--number {
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
}
</style>
